import React from 'react';
import base64url from "base64url";
import {connect} from 'dva'
import {routerRedux} from 'dva/router';
import {Picker, List, WhiteSpace, Tabs, TextareaItem, ImagePicker, Button,Toast,InputItem,DatePicker} from 'antd-mobile';
import moment from 'moment'
import styles from './dysupport.less';
import {createForm} from 'rc-form';
import bg1 from '../../../assets/work/banner2.jpg';
import bg2 from '../../../assets/work/banner4.jpg';
import bg3 from '../../../assets/work/banner5.jpg';


const data = [{
  url: 'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',
  id: '2121',
}];

class dysupport extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      files: data,
      tTitle:[],
      sValue:[],
      oValue:[],
      tValue:[],

    }

  }

//table点击函数
  handleTabClick = (key) => {
    switch (key) {
      case '1': //帮扶列表
        this.props.dispatch({
          type: 'supportList/audit',//model namespace
          payload: {}
        });
        break;
      case '2': //新增帮扶
        this.props.dispatch({
          type: 'supportList/readyPass',
          payload: {}
        });
        break;
    }
  }

  onChange = (files, type, index) => {
    console.log(files, type, index);
    this.setState({
      files,
    });
  }

  onOrgCode=(v)=>{
    let myFirstPromise=new Promise((resolve,reject)=>{
      this.props.dispatch({
        type: 'supportList/memberData',
        payload:{
          org_code:v,
          resolve,reject
        }
      });
    })
  }

  onSubmit = () => {
    this.props.form.validateFields((error,value) => {
      const oTime= moment(value.begin_time).format("YYYY/MM/DD")
      if(!error) {
        this.props.dispatch({
          type: 'supportList/isSubmit',
          payload: {
              org_zb_code:this.state.sValue[0],
            object:this.state.oValue[0],
            content:this.state.tValue[0],
            help_date:oTime,
            title:value.title
          }
        })
      }else {
        Toast.fail('请填完',1);
      }
    })
  };

  //点击跳转帮扶详情
  BfParticulars = (e) => {
    const labelling = e.target.childNodes
    let ID = labelling[0].innerHTML
    console.log(ID, "取没取到id呢")
    this.props.dispatch(
      routerRedux.push({
        pathname: "/work/dysupportxx/support",
      })
    )
    // let myPromise=new Promise((resolve,reject)=>{
    //   this.props.dispatch({
    //     type: 'particulars/particular',
    //     payload:{
    //       id:ID,
    //       resolve,reject
    //     }
    //   });
    // })
    this.props.dispatch(
      {
        type: 'particulars/particular',
        payload: ID
      }
    )
  };


  render() {
    const Item = List.Item;
    const {getFieldProps} = this.props.form;
    const data2 = [];
    const {data1,dataList,member_data,dType} = this.props.supportList;

    let org_data=[];//组织信息
    for (let i in dataList){
      org_data.push({label:dataList[i].name,value:dataList[i].zb_code})
    }
//
//   if (datalist1.name){
//     for (let j in datalist1){
//     member_data.push({label:datalist1[j].name,value:datalist1[j].code})
//   }
//   console.log(member_data,"member_data")
// }


    for (let key in data1) {
      data2.push(data1[key])
    }

    const {files} = this.state;
    return (
      <form>
      <div className="dysupport">
        <WhiteSpace size="lg"/>
        <Tabs
          defaultActiveKey="1"
          animated={true}
          swipeable={false}
          onTabClick={this.handleTabClick}>
          <Tabs.TabPane tab="帮扶列表" key="1">
            <WhiteSpace size="lg"/>
            <div style={{marginTop: '1rem'}}>

              {
                data2.map((o) => {
                  return (
                    <div className={styles.releaseBox} onClick={this.BfParticulars}>
                      <span style={{display: "none"}}>{o.id}</span>
                      <div className={styles.releaseTitle}><img src={bg1} style={{
                        width: '1rem',
                        height: '1rem',
                        borderRadius: '50%',
                        verticalAlign: 'middle'
                      }}/></div>
                      <div className={styles.releaseContent}><span>{o.content}</span><br/><span>{o.title}</span></div>
                    </div>
                  )

                })
              }


              {/*/!*一*!/*/}
              {/*<div className={styles.releaseBox} onClick={this.BfParticulars}>*/}
              {/*<div className={styles.releaseTitle}><img src={bg1} style={{width:'1rem',height:'1rem',borderRadius:'50%',verticalAlign:'middle'}}/></div>*/}
              {/*<div className={styles.releaseContent}><span>李春燕(女)</span><br/><span>下岗失业</span></div>*/}
              {/*</div>*/}
              {/*/!*二*!/*/}
              {/*<div className={styles.releaseBox}>*/}
              {/*<div className={styles.releaseTitle}><img src={bg2} style={{width:'1rem',height:'1rem',borderRadius:'50%',verticalAlign:'middle'}}/></div>*/}
              {/*<div className={styles.releaseContent}><span>彭光辉(男)</span><br/><span>本人患有重病</span></div>*/}
              {/*</div>*/}
              {/*/!*三*!/*/}
              {/*<div className={styles.releaseBox}>*/}
              {/*<div className={styles.releaseTitle}><img src={bg3} style={{width:'1rem',height:'1rem',borderRadius:'50%',verticalAlign:'middle'}}/></div>*/}
              {/*<div className={styles.releaseContent}><span>黄莎(女)</span><br/><span>家庭负担重</span></div>*/}
              {/*</div>*/}

            </div>
          </Tabs.TabPane>
          <Tabs.TabPane tab="新增帮扶" key="2">
            <WhiteSpace size="lg"/>
            <List style={{marginTop: '1rem'}}>
              <InputItem
                {...getFieldProps('title')}
                placeholder="请填写"
                ref={el => this.autoFocusInst = el}
              >标题</InputItem>
              <Picker
                data={org_data}
                cols={1}
                extra="选择组织"

                className="forss"
                value={this.state.sValue}
                onChange={v => this.setState({ sValue: v })}
                onOk={this.onOrgCode}
              >
                <List.Item arrow="horizontal">所属组织</List.Item>
              </Picker>
              <Picker
                data={member_data} cols={1}
                extra="选择帮扶对象"
                value={this.state.oValue}
                onChange={o => this.setState({ oValue: o })}
                onOk={o => this.setState({ oValue: o })}
              >
                <List.Item arrow="horizontal">帮扶对象</List.Item>
              </Picker>
              <DatePicker
                mode="date"
                {...getFieldProps('begin_time', {
                })}>
                <List.Item arrow="horizontal">帮扶日期</List.Item>

              </DatePicker>

            </List>
            <WhiteSpace size="lg"/>
            <List>
              <Picker
                data={dType} cols={1}
                extra="生活困难类型"

                value={this.state.tValue}
                onChange={t => this.setState({ tValue: t })}
                onOk={t => this.setState({ tValue: t })}
              >
                <List.Item arrow="horizontal">选择党员生活困难类型</List.Item>
              </Picker>
              {/*<TextareaItem*/}
                {/*{...getFieldProps('district4')}*/}
                {/*rows={3}*/}
                {/*placeholder="请在此处填入困难原因描述"*/}
              {/*/>*/}
            </List>
            <WhiteSpace size="lg"/>
            <ImagePicker
              files={files}
              onChange={this.onChange}
              onImageClick={(index, fs) => console.log(index, fs)}
              multiple={this.state.multiple}
            />
            <WhiteSpace size="lg"/>
            <WhiteSpace size="lg"/>
            <Button type="submit" inline style={{
              width: '70%',
              backgroundColor: '#DF3030',
              color: '#FFFFFF',
              marginLeft: '1.2rem'
            }}
                    onClick={this.onSubmit.bind(this)}
            >确认</Button>
          </Tabs.TabPane>
        </Tabs>
      </div>
      </form>
    )
  }
}


function mapStateToProps({supportList, particulars}) {
  return {supportList, particulars}
}

const dysupportxx = createForm()(dysupport);

export default connect(mapStateToProps)(dysupportxx);
